import { FC, useEffect, useState } from "react";

const Son = () => {
  useEffect(() => {
    // 挂载的逻辑
    // ...
    return () => {
      // 卸载的逻辑
      console.log("componentWillUnmount");
      // ...
    };
  }, []);

  return <h1>子</h1>;
};

interface Props {}
const Index: FC<Props> = () => {
  const [num, setNum] = useState(0);
  // componentDidMount
  useEffect(() => {
    console.log("componentDidMount 首次");
  }, []);
  // componentDidUpdate
  useEffect(() => {
    console.log("componentDidUpdate 首次+后续数据更新");
  });
  // componentWillUnmount

  return (
    <fieldset>
      <legend>05-函数组件生命周期</legend>

      <h1>{num}</h1>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <button onClick={() => setNum(num - 1)}>-1</button>

      {num > 5 && <Son />}
    </fieldset>
  );
};

export default Index;
